﻿
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Class: xBrowser</title>
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
    <div id="main">
        <h1 class="page-title">Class: xBrowser</h1>
        <section>
            <header>
                <h2>
                    xBrowser
                </h2>
                <div class="class-description">
                    <p>
                        This is a reader of COBie data encoded in JSON format in COBieLite data structure. You can easily combine this with 3D viewer xViewer to get full
                        user experience. This class is loosely coupled with jQuery UI. It is not a mandatory dependency for the rendering itself. Tree views are basically
                        nested unordered lists which is a natural representation for hierarchical data and lists are rendered as a table with one column. Classes are assigned
                        to different parts in a way that you can use to style in any way you want.
                    </p>
                    <p>
                        If you want to do all the rendering yourself you can still take advantage of preprocessing which happens after COBie data is loaded. COBie data model
                        is converted to the simplified structure which is more homogenous and better suitable for templating and visual representation. For more detailed
                        information have a look on <a href="xVisualModel.html">xVisualModel</a> and related classes. Visual model is passed as an argument to loaded event.
                    </p>
                </div>
            </header>
            <article>
                <div class="container-overview">
                    <dt>
                        <h2>Constructor</h2>
                        <h4 class="name" id="xBrowser"><span class="type-signature"></span>new xBrowser<span class="signature">(lang<span class="signature-attributes">opt</span>, culture<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
                    </dt>
                    <dd>
                        <div class="description">
                            <p>This is the main class you need to use to render semantic structure of the building model</p>
                        </div>
                        <h5>Parameters:</h5>
                        <table class="params">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th>Attributes</th>
                                    <th class="last">Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="name"><code>lang</code></td>
                                    <td class="type">
                                        <span class="param-type">string</span>
                                    </td>
                                    <td class="attributes">
                                        &lt;optional><br>
                                    </td>
                                    <td class="description last"><p>language code. This framework contains dictionary for parameters and attributes. It will be used for COBie processing and rendering. If your language or culture is not available default values are &quot;en&quot;, &quot;uk&quot;</p></td>
                                </tr>
                                <tr>
                                    <td class="name"><code>culture</code></td>
                                    <td class="type">
                                        <span class="param-type">string</span>
                                    </td>
                                    <td class="attributes">
                                        &lt;optional><br>
                                    </td>
                                    <td class="description last"><p>culture code. Default combination of language and culture is &quot;en&quot;, &quot;uk&quot;.</p></td>
                                </tr>
                            </tbody>
                        </table>
                        <dl class="details"></dl>
                    </dd>
                </div>
                <h3 class="subsection-title">Methods</h3>
                <dl>
                    <dt>
                        <h4 class="name" id="activateEntity"><span class="type-signature"></span>activateEntity<span class="signature">(id)</span><span class="type-signature"></span></h4>
                    </dt>
                    <dd>
                        <div class="description">
                            <p>
                                Use this function to activate entity from code. This will cause <a href="xBrowser.html#event:entityActive">entityActive</a> event to be fired.
                                That might be usefull to update data relying on any kind of selection.
                            </p>
                        </div>
                        <h5>Parameters:</h5>
                        <table class="params">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th class="last">Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="name"><code>id</code></td>
                                    <td class="type">
                                        <span class="param-type">Number</span>
                                    </td>
                                    <td class="description last"><p>ID of the entity to be activated</p></td>
                                </tr>
                            </tbody>
                        </table>
                        <dl class="details"></dl>
                    </dd>
                    <dt>
                        <h4 class="name" id="load"><span class="type-signature"></span>load<span class="signature">(source)</span><span class="type-signature"></span></h4>
                    </dt>
                    <dd>
                        <div class="description">
                            <p>
                                Use this function to load data from JSON representation of COBieLite. Listen to <a href="xBrowser.html#event:loaded">loaded</a> event to start
                                using the browser.
                            </p>
                        </div>
                        <h5>Parameters:</h5>
                        <table class="params">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th class="last">Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="name"><code>source</code></td>
                                    <td class="type">
                                        <span class="param-type">string</span>
                                        |
                                        <span class="param-type">File</span>
                                        |
                                        <span class="param-type">Blob</span>
                                    </td>
                                    <td class="description last"><p>path to JSON data or File or Blob object to be used to load the data from</p></td>
                                </tr>
                            </tbody>
                        </table>
                        <dl class="details"></dl>
                        <h5>Fires:</h5>
                        <ul>
                            <li><a href="xBrowser.html#event:loaded">xBrowser#event:loaded</a></li>
                        </ul>
                    </dd>
                    <dt>
                        <h4 class="name" id="on"><span class="type-signature"></span>on<span class="signature">(eventName, callback)</span><span class="type-signature"></span></h4>
                    </dt>
                    <dd>
                        <div class="description">
                            <p>
                                Use this method to register to events of the browser. You can define arbitrary number
                                of event handlers for any event. You can remove handler by calling <a href="xBrowser.html#onRemove">onRemove()</a> method.
                            </p>
                        </div>
                        <h5>Parameters:</h5>
                        <table class="params">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th class="last">Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="name"><code>eventName</code></td>
                                    <td class="type">
                                        <span class="param-type">String</span>
                                    </td>
                                    <td class="description last"><p>Name of the event you would like to listen to.</p></td>
                                </tr>
                                <tr>
                                    <td class="name"><code>callback</code></td>
                                    <td class="type">
                                        <span class="param-type">Object</span>
                                    </td>
                                    <td class="description last"><p>Callback handler of the event which will consume arguments and perform any custom action.</p></td>
                                </tr>
                            </tbody>
                        </table>
                        <dl class="details"></dl>
                    </dd>
                    <dt>
                        <h4 class="name" id="onRemove"><span class="type-signature"></span>onRemove<span class="signature">(eventName, callback)</span><span class="type-signature"></span></h4>
                    </dt>
                    <dd>
                        <div class="description">
                            <p>Use this method to unregisted handlers from events. You can add event handlers by call to <a href="xBrowser.html#on">on()</a> method.</p>
                        </div>
                        <h5>Parameters:</h5>
                        <table class="params">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th class="last">Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="name"><code>eventName</code></td>
                                    <td class="type">
                                        <span class="param-type">String</span>
                                    </td>
                                    <td class="description last"><p>Name of the event</p></td>
                                </tr>
                                <tr>
                                    <td class="name"><code>callback</code></td>
                                    <td class="type">
                                        <span class="param-type">Object</span>
                                    </td>
                                    <td class="description last"><p>Handler to be removed</p></td>
                                </tr>
                            </tbody>
                        </table>
                        <dl class="details"></dl>
                    </dd>
                    <dt>
                        <h4 class="name" id="renderAssetTypes"><span class="type-signature"></span>renderAssetTypes<span class="signature">(container, initTree)</span><span class="type-signature"></span></h4>
                    </dt>
                    <dd>
                        <div class="description">
                            <p>
                                This function renders asset types as a tree view (asset type -&gt; asset). If you use jQuery UI it can be turned into collapsable tree control
                                with UI icons. But it is not mandatory and you can style it any way you want. Just keep in mind that HTML elements
                                created by this function have a handlers attached which will fire UI events of <a href="xBrowser.html">xBrowser</a>. If you do any
                                heavy transformation of the resulting HTML make sure you keep this if other parts of your code rely on these events.
                            </p>
                        </div>
                        <h5>Parameters:</h5>
                        <table class="params">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th class="last">Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="name"><code>container</code></td>
                                    <td class="type">
                                        <span class="param-type">string</span>
                                        |
                                        <span class="param-type">HTMLElement</span>
                                    </td>
                                    <td class="description last"><p>string ID of the contaier or HTMLElement representing container. Resulting HTML will be placed inside of this element. Be aware that this will erase any actual content of the container element.</p></td>
                                </tr>
                                <tr>
                                    <td class="name"><code>initTree</code></td>
                                    <td class="type">
                                        <span class="param-type">Bool</span>
                                    </td>
                                    <td class="description last"><p>if true and jQuery UI is referenced tree will be rendered using UI icons as a collapsable tree control.</p></td>
                                </tr>
                            </tbody>
                        </table>
                        <dl class="details"></dl>
                    </dd>
                    <dt>
                        <h4 class="name" id="renderAssignments"><span class="type-signature"></span>renderAssignments<span class="signature">(entity, container)</span><span class="type-signature"></span></h4>
                    </dt>
                    <dd>
                        <div class="description">
                            <p>
                                This function renders assignments as a list view. This represents different kinds of relations between this and other entities
                                If you use jQuery UI it will use UI icons.
                                But it is not mandatory and you can style it any way you want. Just keep in mind that HTML elements
                                created by this function have a handlers attached which will fire UI events of <a href="xBrowser.html">xBrowser</a>. If you do any
                                heavy transformation of the resulting HTML make sure you keep this if other parts of your code rely on these events.
                            </p>
                        </div>
                        <h5>Parameters:</h5>
                        <table class="params">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th class="last">Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="name"><code>entity</code></td>
                                    <td class="type">
                                        <span class="param-type"><a href="xVisualEntity.html">xVisualEntity</a></span>
                                    </td>
                                    <td class="description last">
                                        <p>
                                            visual entity. You can obtain this entity directly from xVisualModel or in a handler of one of these events:
                                            <a href="xBrowser.html#event:entityClick">entityClick</a>,
                                            <a href="xBrowser.html#event:entityDblclick">entityDblclick</a>,
                                            <a href="xBrowser.html#event:entityMouseDown">entityMouseDown</a>,
                                            <a href="xBrowser.html#event:entityMouseUp">entityMouseUp</a>,
                                            <a href="xBrowser.html#event:entityMouseMove">entityMouseMove</a>,
                                            <a href="xBrowser.html#event:entityTouch">entityTouch</a>,
                                            <a href="xBrowser.html#event:entityActive">entityActive</a>
                                        </p>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="name"><code>container</code></td>
                                    <td class="type">
                                        <span class="param-type">string</span>
                                        |
                                        <span class="param-type">HTMLElement</span>
                                    </td>
                                    <td class="description last"><p>string ID of the contaier or HTMLElement representing container. Resulting HTML will be placed inside of this element. Be aware that this will erase any actual content of the container element.</p></td>
                                </tr>
                            </tbody>
                        </table>
                        <dl class="details"></dl>
                    </dd>
                    <dt>
                        <h4 class="name" id="renderAttributes"><span class="type-signature"></span>renderAttributes<span class="signature">(entity, container)</span><span class="type-signature"></span></h4>
                    </dt>
                    <dd>
                        <div class="description">
                            <p>
                                This function renders attributes assigned to the entity as a list view. Attributes are COBie equivalent for Property Sets and can contain
                                arbitrary data. If you use jQuery UI it will use UI icons.
                                But it is not mandatory and you can style it any way you want.
                            </p>
                        </div>
                        <h5>Parameters:</h5>
                        <table class="params">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th class="last">Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="name"><code>entity</code></td>
                                    <td class="type">
                                        <span class="param-type"><a href="xVisualEntity.html">xVisualEntity</a></span>
                                    </td>
                                    <td class="description last">
                                        <p>
                                            visual entity. You can obtain this entity directly from xVisualModel or in a handler of one of these events:
                                            <a href="xBrowser.html#event:entityClick">entityClick</a>,
                                            <a href="xBrowser.html#event:entityDblclick">entityDblclick</a>,
                                            <a href="xBrowser.html#event:entityMouseDown">entityMouseDown</a>,
                                            <a href="xBrowser.html#event:entityMouseUp">entityMouseUp</a>,
                                            <a href="xBrowser.html#event:entityMouseMove">entityMouseMove</a>,
                                            <a href="xBrowser.html#event:entityTouch">entityTouch</a>,
                                            <a href="xBrowser.html#event:entityActive">entityActive</a>
                                        </p>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="name"><code>container</code></td>
                                    <td class="type">
                                        <span class="param-type">string</span>
                                        |
                                        <span class="param-type">HTMLElement</span>
                                    </td>
                                    <td class="description last"><p>string ID of the contaier or HTMLElement representing container. Resulting HTML will be placed inside of this element. Be aware that this will erase any actual content of the container element.</p></td>
                                </tr>
                            </tbody>
                        </table>
                        <dl class="details"></dl>
                    </dd>
                    <dt>
                        <h4 class="name" id="renderContacts"><span class="type-signature"></span>renderContacts<span class="signature">(container)</span><span class="type-signature"></span></h4>
                    </dt>
                    <dd>
                        <div class="description">
                            <p>
                                This function renders asset types as a list view (asset type -&gt; asset). If you use jQuery UI it will use UI icons.
                                But it is not mandatory and you can style it any way you want. Just keep in mind that HTML elements
                                created by this function have a handlers attached which will fire UI events of <a href="xBrowser.html">xBrowser</a>. If you do any
                                heavy transformation of the resulting HTML make sure you keep this if other parts of your code rely on these events.
                            </p>
                        </div>
                        <h5>Parameters:</h5>
                        <table class="params">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th class="last">Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="name"><code>container</code></td>
                                    <td class="type">
                                        <span class="param-type">string</span>
                                        |
                                        <span class="param-type">HTMLElement</span>
                                    </td>
                                    <td class="description last"><p>string ID of the contaier or HTMLElement representing container. Resulting HTML will be placed inside of this element. Be aware that this will erase any actual content of the container element.</p></td>
                                </tr>
                            </tbody>
                        </table>
                        <dl class="details"></dl>
                    </dd>
                    <dt>
                        <h4 class="name" id="renderDocuments"><span class="type-signature"></span>renderDocuments<span class="signature">(entity, container)</span><span class="type-signature"></span></h4>
                    </dt>
                    <dd>
                        <div class="description">
                            <p>
                                This function renders documents as a list view. If you use jQuery UI it will use UI icons.
                                But it is not mandatory and you can style it any way you want. Just keep in mind that HTML elements
                                created by this function have a handlers attached which will fire UI events of <a href="xBrowser.html">xBrowser</a>. If you do any
                                heavy transformation of the resulting HTML make sure you keep this if other parts of your code rely on these events.
                            </p>
                        </div>
                        <h5>Parameters:</h5>
                        <table class="params">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th class="last">Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="name"><code>entity</code></td>
                                    <td class="type">
                                        <span class="param-type"><a href="xVisualEntity.html">xVisualEntity</a></span>
                                    </td>
                                    <td class="description last">
                                        <p>
                                            visual entity. You can obtain this entity directly from xVisualModel or in a handler of one of these events:
                                            <a href="xBrowser.html#event:entityClick">entityClick</a>,
                                            <a href="xBrowser.html#event:entityDblclick">entityDblclick</a>,
                                            <a href="xBrowser.html#event:entityMouseDown">entityMouseDown</a>,
                                            <a href="xBrowser.html#event:entityMouseUp">entityMouseUp</a>,
                                            <a href="xBrowser.html#event:entityMouseMove">entityMouseMove</a>,
                                            <a href="xBrowser.html#event:entityTouch">entityTouch</a>,
                                            <a href="xBrowser.html#event:entityActive">entityActive</a>
                                        </p>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="name"><code>container</code></td>
                                    <td class="type">
                                        <span class="param-type">string</span>
                                        |
                                        <span class="param-type">HTMLElement</span>
                                    </td>
                                    <td class="description last"><p>string ID of the contaier or HTMLElement representing container. Resulting HTML will be placed inside of this element. Be aware that this will erase any actual content of the container element.</p></td>
                                </tr>
                            </tbody>
                        </table>
                        <dl class="details"></dl>
                    </dd>
                    <dt>
                        <h4 class="name" id="renderIssues"><span class="type-signature"></span>renderIssues<span class="signature">(entity, container)</span><span class="type-signature"></span></h4>
                    </dt>
                    <dd>
                        <div class="description">
                            <p>
                                This function renders issues assigned to the entity as a list view. If you use jQuery UI it will use UI icons.
                                But it is not mandatory and you can style it any way you want. Just keep in mind that HTML elements
                                created by this function have a handlers attached which will fire UI events of <a href="xBrowser.html">xBrowser</a>. If you do any
                                heavy transformation of the resulting HTML make sure you keep this if other parts of your code rely on these events.
                            </p>
                        </div>
                        <h5>Parameters:</h5>
                        <table class="params">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th class="last">Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="name"><code>entity</code></td>
                                    <td class="type">
                                        <span class="param-type"><a href="xVisualEntity.html">xVisualEntity</a></span>
                                    </td>
                                    <td class="description last">
                                        <p>
                                            visual entity. You can obtain this entity directly from xVisualModel or in a handler of one of these events:
                                            <a href="xBrowser.html#event:entityClick">entityClick</a>,
                                            <a href="xBrowser.html#event:entityDblclick">entityDblclick</a>,
                                            <a href="xBrowser.html#event:entityMouseDown">entityMouseDown</a>,
                                            <a href="xBrowser.html#event:entityMouseUp">entityMouseUp</a>,
                                            <a href="xBrowser.html#event:entityMouseMove">entityMouseMove</a>,
                                            <a href="xBrowser.html#event:entityTouch">entityTouch</a>,
                                            <a href="xBrowser.html#event:entityActive">entityActive</a>
                                        </p>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="name"><code>container</code></td>
                                    <td class="type">
                                        <span class="param-type">string</span>
                                        |
                                        <span class="param-type">HTMLElement</span>
                                    </td>
                                    <td class="description last"><p>string ID of the contaier or HTMLElement representing container. Resulting HTML will be placed inside of this element. Be aware that this will erase any actual content of the container element.</p></td>
                                </tr>
                            </tbody>
                        </table>
                        <dl class="details"></dl>
                    </dd>
                    <dt>
                        <h4 class="name" id="renderProperties"><span class="type-signature"></span>renderProperties<span class="signature">(entity, container)</span><span class="type-signature"></span></h4>
                    </dt>
                    <dd>
                        <div class="description">
                            <p>
                                This function renders properties assigned to the entity as a list view. Properties are predefined in COBie data model. If you use jQuery UI it will use UI icons.
                                But it is not mandatory and you can style it any way you want.
                            </p>
                        </div>
                        <h5>Parameters:</h5>
                        <table class="params">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th class="last">Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="name"><code>entity</code></td>
                                    <td class="type">
                                        <span class="param-type"><a href="xVisualEntity.html">xVisualEntity</a></span>
                                    </td>
                                    <td class="description last">
                                        <p>
                                            visual entity. You can obtain this entity directly from xVisualModel or in a handler of one of these events:
                                            <a href="xBrowser.html#event:entityClick">entityClick</a>,
                                            <a href="xBrowser.html#event:entityDblclick">entityDblclick</a>,
                                            <a href="xBrowser.html#event:entityMouseDown">entityMouseDown</a>,
                                            <a href="xBrowser.html#event:entityMouseUp">entityMouseUp</a>,
                                            <a href="xBrowser.html#event:entityMouseMove">entityMouseMove</a>,
                                            <a href="xBrowser.html#event:entityTouch">entityTouch</a>,
                                            <a href="xBrowser.html#event:entityActive">entityActive</a>
                                        </p>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="name"><code>container</code></td>
                                    <td class="type">
                                        <span class="param-type">string</span>
                                        |
                                        <span class="param-type">HTMLElement</span>
                                    </td>
                                    <td class="description last"><p>string ID of the contaier or HTMLElement representing container. Resulting HTML will be placed inside of this element. Be aware that this will erase any actual content of the container element.</p></td>
                                </tr>
                            </tbody>
                        </table>
                        <dl class="details"></dl>
                    </dd>
                    <dt>
                        <h4 class="name" id="renderPropertiesAttributes"><span class="type-signature"></span>renderPropertiesAttributes<span class="signature">(entity, container)</span><span class="type-signature"></span></h4>
                    </dt>
                    <dd>
                        <div class="description">
                            <p>
                                This function renders properties and attributes assigned to the entity as a list view. This combines data which can be rendered separately
                                by <a href="xBrowser.html#renderProperties">renderProperties()</a> or <a href="xBrowser.html#renderAttributes">renderAttributes()</a> but it is sometimes convenient
                                to render both into one single layout.  If you use jQuery UI it will use UI icons.
                                But it is not mandatory and you can style it any way you want.
                            </p>
                        </div>
                        <h5>Parameters:</h5>
                        <table class="params">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th class="last">Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="name"><code>entity</code></td>
                                    <td class="type">
                                        <span class="param-type"><a href="xVisualEntity.html">xVisualEntity</a></span>
                                    </td>
                                    <td class="description last">
                                        <p>
                                            visual entity. You can obtain this entity directly from xVisualModel or in a handler of one of these events:
                                            <a href="xBrowser.html#event:entityClick">entityClick</a>,
                                            <a href="xBrowser.html#event:entityDblclick">entityDblclick</a>,
                                            <a href="xBrowser.html#event:entityMouseDown">entityMouseDown</a>,
                                            <a href="xBrowser.html#event:entityMouseUp">entityMouseUp</a>,
                                            <a href="xBrowser.html#event:entityMouseMove">entityMouseMove</a>,
                                            <a href="xBrowser.html#event:entityTouch">entityTouch</a>,
                                            <a href="xBrowser.html#event:entityActive">entityActive</a>
                                        </p>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="name"><code>container</code></td>
                                    <td class="type">
                                        <span class="param-type">string</span>
                                        |
                                        <span class="param-type">HTMLElement</span>
                                    </td>
                                    <td class="description last"><p>string ID of the contaier or HTMLElement representing container. Resulting HTML will be placed inside of this element. Be aware that this will erase any actual content of the container element.</p></td>
                                </tr>
                            </tbody>
                        </table>
                        <dl class="details"></dl>
                    </dd>
                    <dt>
                        <h4 class="name" id="renderSpatialStructure"><span class="type-signature"></span>renderSpatialStructure<span class="signature">(container, initTree)</span><span class="type-signature"></span></h4>
                    </dt>
                    <dd>
                        <div class="description">
                            <p>
                                This function renders spatial structure as a tree view (facility -&gt; floors -&gt; spaces -&gt; assets). If you use jQuery UI it can be turned into collapsable tree control
                                with UI icons. But it is not mandatory and you can style it any way you want. Just keep in mind that HTML elements
                                created by this function have a handlers attached which will fire UI events of <a href="xBrowser.html">xBrowser</a>. If you do any
                                heavy transformation of the resulting HTML make sure you keep this if other parts of your code rely on these events.
                            </p>
                        </div>
                        <h5>Parameters:</h5>
                        <table class="params">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th class="last">Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="name"><code>container</code></td>
                                    <td class="type">
                                        <span class="param-type">string</span>
                                        |
                                        <span class="param-type">HTMLElement</span>
                                    </td>
                                    <td class="description last"><p>string ID of the contaier or HTMLElement representing container. Resulting HTML will be placed inside of this element. Be aware that this will erase any actual content of the container element.</p></td>
                                </tr>
                                <tr>
                                    <td class="name"><code>initTree</code></td>
                                    <td class="type">
                                        <span class="param-type">Bool</span>
                                    </td>
                                    <td class="description last"><p>if true and jQuery UI is referenced tree will be rendered using UI icons as a collapsable tree control.</p></td>
                                </tr>
                            </tbody>
                        </table>
                        <dl class="details"></dl>
                    </dd>
                    <dt>
                        <h4 class="name" id="renderSystems"><span class="type-signature"></span>renderSystems<span class="signature">(container, initTree)</span><span class="type-signature"></span></h4>
                    </dt>
                    <dd>
                        <div class="description">
                            <p>
                                This function renders systems as a tree view (systems -&gt; assets). If you use jQuery UI it can be turned into collapsable tree control
                                with UI icons. But it is not mandatory and you can style it any way you want. Just keep in mind that HTML elements
                                created by this function have a handlers attached which will fire UI events of <a href="xBrowser.html">xBrowser</a>. If you do any
                                heavy transformation of the resulting HTML make sure you keep this if other parts of your code rely on these events.
                            </p>
                        </div>
                        <h5>Parameters:</h5>
                        <table class="params">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th class="last">Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="name"><code>container</code></td>
                                    <td class="type">
                                        <span class="param-type">string</span>
                                        |
                                        <span class="param-type">HTMLElement</span>
                                    </td>
                                    <td class="description last"><p>string ID of the contaier or HTMLElement representing container. Resulting HTML will be placed inside of this element. Be aware that this will erase any actual content of the container element.</p></td>
                                </tr>
                                <tr>
                                    <td class="name"><code>initTree</code></td>
                                    <td class="type">
                                        <span class="param-type">Bool</span>
                                    </td>
                                    <td class="description last"><p>if true and jQuery UI is referenced tree will be rendered using UI icons as a collapsable tree control.</p></td>
                                </tr>
                            </tbody>
                        </table>
                        <dl class="details"></dl>
                    </dd>
                    <dt>
                        <h4 class="name" id="renderZones"><span class="type-signature"></span>renderZones<span class="signature">(container, initTree)</span><span class="type-signature"></span></h4>
                    </dt>
                    <dd>
                        <div class="description">
                            <p>
                                This function renders zones as a tree view (zones -&gt; spaces -&gt; assets). If you use jQuery UI it can be turned into collapsable tree control
                                with UI icons. But it is not mandatory and you can style it any way you want. Just keep in mind that HTML elements
                                created by this function have a handlers attached which will fire UI events of <a href="xBrowser.html">xBrowser</a>. If you do any
                                heavy transformation of the resulting HTML make sure you keep this if other parts of your code rely on these events.
                            </p>
                        </div>
                        <h5>Parameters:</h5>
                        <table class="params">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th class="last">Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="name"><code>container</code></td>
                                    <td class="type">
                                        <span class="param-type">string</span>
                                        |
                                        <span class="param-type">HTMLElement</span>
                                    </td>
                                    <td class="description last"><p>string ID of the contaier or HTMLElement representing container. Resulting HTML will be placed inside of this element. Be aware that this will erase any actual content of the container element.</p></td>
                                </tr>
                                <tr>
                                    <td class="name"><code>initTree</code></td>
                                    <td class="type">
                                        <span class="param-type">Bool</span>
                                    </td>
                                    <td class="description last"><p>if true and jQuery UI is referenced tree will be rendered using UI icons as a collapsable tree control.</p></td>
                                </tr>
                            </tbody>
                        </table>
                        <dl class="details"></dl>
                    </dd>
                </dl>
                <h3 class="subsection-title">Events</h3>
                <dl>
                    <dt>
                        <h4 class="name" id="event:entityActive">entityActive</h4>
                    </dt>
                    <dd>
                        <div class="description">
                            <p>Occurs when user clicks on a HTML element representing <a href="xVisualEntity.html">xVisualEntity</a> or if <a href="xBrowser.html#activateEntity">activateEntity()</a> is called.</p>
                        </div>
                        <h5>Type:</h5>
                        <ul>
                            <li>
                                <span class="param-type">object</span>
                            </li>
                        </ul>
                        <h5>Parameters:</h5>
                        <table class="params">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th class="last">Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="name"><code>entity</code></td>
                                    <td class="type">
                                        <span class="param-type"><a href="xVisualEntity.html">xVisualEntity</a></span>
                                    </td>
                                    <td class="description last"></td>
                                </tr>
                                <tr>
                                    <td class="name"><code>event</code></td>
                                    <td class="type">
                                        <span class="param-type">object</span>
                                    </td>
                                    <td class="description last"></td>
                                </tr>
                                <tr>
                                    <td class="name"><code>element</code></td>
                                    <td class="type">
                                        <span class="param-type">HTMLElement</span>
                                    </td>
                                    <td class="description last"><p>This argument might be null if event is fired in code by call to <a href="xBrowser.html#activateEntity">activateEntity()</a>.</p></td>
                                </tr>
                            </tbody>
                        </table>
                        <dl class="details"></dl>
                    </dd>
                    <dt>
                        <h4 class="name" id="event:entityClick">entityClick</h4>
                    </dt>
                    <dd>
                        <div class="description">
                            <p>Occurs when user clicks on a HTML element representing <a href="xVisualEntity.html">xVisualEntity</a></p>
                        </div>
                        <h5>Type:</h5>
                        <ul>
                            <li>
                                <span class="param-type">object</span>
                            </li>
                        </ul>
                        <h5>Parameters:</h5>
                        <table class="params">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th class="last">Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="name"><code>entity</code></td>
                                    <td class="type">
                                        <span class="param-type"><a href="xVisualEntity.html">xVisualEntity</a></span>
                                    </td>
                                    <td class="description last"></td>
                                </tr>
                                <tr>
                                    <td class="name"><code>event</code></td>
                                    <td class="type">
                                        <span class="param-type">object</span>
                                    </td>
                                    <td class="description last"></td>
                                </tr>
                                <tr>
                                    <td class="name"><code>element</code></td>
                                    <td class="type">
                                        <span class="param-type">HTMLElement</span>
                                    </td>
                                    <td class="description last"></td>
                                </tr>
                            </tbody>
                        </table>
                        <dl class="details"></dl>
                    </dd>
                    <dt>
                        <h4 class="name" id="event:entityDblclick">entityDblclick</h4>
                    </dt>
                    <dd>
                        <div class="description">
                            <p>Occurs when user double clicks on a HTML element representing <a href="xVisualEntity.html">xVisualEntity</a>.</p>
                        </div>
                        <h5>Type:</h5>
                        <ul>
                            <li>
                                <span class="param-type">object</span>
                            </li>
                        </ul>
                        <h5>Parameters:</h5>
                        <table class="params">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th class="last">Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="name"><code>entity</code></td>
                                    <td class="type">
                                        <span class="param-type"><a href="xVisualEntity.html">xVisualEntity</a></span>
                                    </td>
                                    <td class="description last"></td>
                                </tr>
                                <tr>
                                    <td class="name"><code>event</code></td>
                                    <td class="type">
                                        <span class="param-type">object</span>
                                    </td>
                                    <td class="description last"></td>
                                </tr>
                                <tr>
                                    <td class="name"><code>element</code></td>
                                    <td class="type">
                                        <span class="param-type">HTMLElement</span>
                                    </td>
                                    <td class="description last"><p>This argument might be null if event is fired in code by call to <a href="xBrowser.html#activateEntity">activateEntity()</a>.</p></td>
                                </tr>
                            </tbody>
                        </table>
                        <dl class="details"></dl>
                    </dd>
                    <dt>
                        <h4 class="name" id="event:entityMouseDown">entityMouseDown</h4>
                    </dt>
                    <dd>
                        <div class="description">
                            <p>Occurs when mouseDown event occurs on a HTML element representing <a href="xVisualEntity.html">xVisualEntity</a></p>
                        </div>
                        <h5>Type:</h5>
                        <ul>
                            <li>
                                <span class="param-type">object</span>
                            </li>
                        </ul>
                        <h5>Parameters:</h5>
                        <table class="params">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th class="last">Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="name"><code>entity</code></td>
                                    <td class="type">
                                        <span class="param-type"><a href="xVisualEntity.html">xVisualEntity</a></span>
                                    </td>
                                    <td class="description last"></td>
                                </tr>
                                <tr>
                                    <td class="name"><code>event</code></td>
                                    <td class="type">
                                        <span class="param-type">object</span>
                                    </td>
                                    <td class="description last"></td>
                                </tr>
                                <tr>
                                    <td class="name"><code>element</code></td>
                                    <td class="type">
                                        <span class="param-type">HTMLElement</span>
                                    </td>
                                    <td class="description last"></td>
                                </tr>
                            </tbody>
                        </table>
                        <dl class="details"></dl>
                    </dd>
                    <dt>
                        <h4 class="name" id="event:entityMouseMove">entityMouseMove</h4>
                    </dt>
                    <dd>
                        <div class="description">
                            <p>Occurs when mouseMove event occurs on a HTML element representing <a href="xVisualEntity.html">xVisualEntity</a></p>
                        </div>
                        <h5>Type:</h5>
                        <ul>
                            <li>
                                <span class="param-type">object</span>
                            </li>
                        </ul>
                        <h5>Parameters:</h5>
                        <table class="params">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th class="last">Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="name"><code>entity</code></td>
                                    <td class="type">
                                        <span class="param-type"><a href="xVisualEntity.html">xVisualEntity</a></span>
                                    </td>
                                    <td class="description last"></td>
                                </tr>
                                <tr>
                                    <td class="name"><code>event</code></td>
                                    <td class="type">
                                        <span class="param-type">object</span>
                                    </td>
                                    <td class="description last"></td>
                                </tr>
                                <tr>
                                    <td class="name"><code>element</code></td>
                                    <td class="type">
                                        <span class="param-type">HTMLElement</span>
                                    </td>
                                    <td class="description last"></td>
                                </tr>
                            </tbody>
                        </table>
                        <dl class="details"></dl>
                    </dd>
                    <dt>
                        <h4 class="name" id="event:entityMouseUp">entityMouseUp</h4>
                    </dt>
                    <dd>
                        <div class="description">
                            <p>Occurs when mouseUp event occurs on a HTML element representing <a href="xVisualEntity.html">xVisualEntity</a></p>
                        </div>
                        <h5>Type:</h5>
                        <ul>
                            <li>
                                <span class="param-type">object</span>
                            </li>
                        </ul>
                        <h5>Parameters:</h5>
                        <table class="params">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th class="last">Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="name"><code>entity</code></td>
                                    <td class="type">
                                        <span class="param-type"><a href="xVisualEntity.html">xVisualEntity</a></span>
                                    </td>
                                    <td class="description last"></td>
                                </tr>
                                <tr>
                                    <td class="name"><code>event</code></td>
                                    <td class="type">
                                        <span class="param-type">object</span>
                                    </td>
                                    <td class="description last"></td>
                                </tr>
                                <tr>
                                    <td class="name"><code>element</code></td>
                                    <td class="type">
                                        <span class="param-type">HTMLElement</span>
                                    </td>
                                    <td class="description last"></td>
                                </tr>
                            </tbody>
                        </table>
                        <dl class="details"></dl>
                    </dd>
                    <dt>
                        <h4 class="name" id="event:entityTouch">entityTouch</h4>
                    </dt>
                    <dd>
                        <div class="description">
                            <p>Occurs when touch event occurs on a HTML element representing <a href="xVisualEntity.html">xVisualEntity</a></p>
                        </div>
                        <h5>Type:</h5>
                        <ul>
                            <li>
                                <span class="param-type">object</span>
                            </li>
                        </ul>
                        <h5>Parameters:</h5>
                        <table class="params">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th class="last">Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="name"><code>entity</code></td>
                                    <td class="type">
                                        <span class="param-type"><a href="xVisualEntity.html">xVisualEntity</a></span>
                                    </td>
                                    <td class="description last"></td>
                                </tr>
                                <tr>
                                    <td class="name"><code>event</code></td>
                                    <td class="type">
                                        <span class="param-type">object</span>
                                    </td>
                                    <td class="description last"></td>
                                </tr>
                                <tr>
                                    <td class="name"><code>element</code></td>
                                    <td class="type">
                                        <span class="param-type">HTMLElement</span>
                                    </td>
                                    <td class="description last"></td>
                                </tr>
                            </tbody>
                        </table>
                        <dl class="details"></dl>
                    </dd>
                    <dt>
                        <h4 class="name" id="event:loaded">loaded</h4>
                    </dt>
                    <dd>
                        <div class="description">
                            <p>Occurs when JSON data model is loaded</p>
                        </div>
                        <h5>Type:</h5>
                        <ul>
                            <li>
                                <span class="param-type">object</span>
                            </li>
                        </ul>
                        <h5>Parameters:</h5>
                        <table class="params">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th class="last">Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="name"><code>model</code></td>
                                    <td class="type">
                                        <span class="param-type"><a href="xVisualModel.html">xVisualModel</a></span>
                                    </td>
                                    <td class="description last"><p>preprocessed <a href="xVisualModel.html">model</a> prepared for visual representation</p></td>
                                </tr>
                                <tr>
                                    <td class="name"><code>model</code></td>
                                    <td class="type">
                                        <span class="param-type">object</span>
                                    </td>
                                    <td class="description last"><p>original COBie data</p></td>
                                </tr>
                            </tbody>
                        </table>
                        <dl class="details"></dl>
                    </dd>
                </dl>
            </article>
        </section>
    </div>
    <nav>
        <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="OrthogonalCamera.html">OrthogonalCamera</a></li><li><a href="PerspectiveCamera.html">PerspectiveCamera</a></li><li><a href="Prerequisities.html">Prerequisities</a></li><li><a href="xBrowser.html">xBrowser</a></li><li><a href="xNavigationCube.html">xNavigationCube</a></li><li><a href="xNavigationHome.html">xNavigationHome</a></li><li><a href="xViewer.html">xViewer</a></li><li><a href="xVisualAssignmentSet.html">xVisualAssignmentSet</a></li><li><a href="xVisualAttribute.html">xVisualAttribute</a></li><li><a href="xVisualEntity.html">xVisualEntity</a></li><li><a href="xVisualModel.html">xVisualModel</a></li><li><a href="xVisualProperty.html">xVisualProperty</a></li></ul><h3>Events</h3><ul><li><a href="xBrowser.html#event:entityActive">entityActive</a></li><li><a href="xBrowser.html#event:entityClick">entityClick</a></li><li><a href="xBrowser.html#event:entityDblclick">entityDblclick</a></li><li><a href="xBrowser.html#event:entityMouseDown">entityMouseDown</a></li><li><a href="xBrowser.html#event:entityMouseMove">entityMouseMove</a></li><li><a href="xBrowser.html#event:entityMouseUp">entityMouseUp</a></li><li><a href="xBrowser.html#event:entityTouch">entityTouch</a></li><li><a href="xBrowser.html#event:loaded">loaded</a></li><li><a href="xViewer.html#event:clipped">clipped</a></li><li><a href="xViewer.html#event:dblclick">dblclick</a></li><li><a href="xViewer.html#event:error">error</a></li><li><a href="xViewer.html#event:fps">fps</a></li><li><a href="xViewer.html#event:frame">frame</a></li><li><a href="xViewer.html#event:loaded">loaded</a></li><li><a href="xViewer.html#event:mouseDown">mouseDown</a></li><li><a href="xViewer.html#event:pick">pick</a></li><li><a href="xViewer.html#event:unclipped">unclipped</a></li></ul><h3>Tutorials</h3><ul><li><a href="tutorial-1_Hello_building.html">Hello building!</a></li><li><a href="tutorial-2_Safe_Hello_building.html">Safe 'Hello building!'</a></li><li><a href="tutorial-3_Eventful_building.html">Eventful building</a></li><li><a href="tutorial-4_Building_seen_from_everywhere.html">Building seen from everywhere ...</a></li><li><a href="tutorial-5_Colourful_building.html">Colourful building</a></li><li><a href="tutorial-6_Building_described.html">Building described</a></li></ul><h3>Global</h3><ul><li><a href="global.html#xProductType">xProductType</a></li><li><a href="global.html#xState">xState</a></li></ul>
    </nav>
    <br clear="both">
    <footer>
        Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha11</a> on Tue Jul 12 2016 16:17:58 GMT+0200 (Central Europe Daylight Time)
    </footer>
    <script>prettyPrint();</script>
    <script src="scripts/linenumber.js"></script>
</body>
</html>